<template>
	<view class="person_paycode">
		<view class="main">
			<view class="input">
				<view class="left">新手机号</view>
				<view class="right">
					<u-input v-model="userinfo.mobile" disabled type="number" :clearable='false' placeholder='请输入新手机号' />
				</view>
			</view>
			<view class="input">
				<view class="left">验证码</view>
				<view class="right_code">
					<u-input v-model="code" type="number" :clearable='false' placeholder='请输入验证码' />
					<text @click="sendCodeBtn">{{codeTxt}}</text>
				</view>
			</view>
			<view class="title" style="margin-top: 60rpx;">支付宝收款码</view>
			<view class="image" @click="uploadImage(1)">
				<image v-if="zfb_url" class="img" :src="zfb_url" mode="widthFix"></image>
				<image v-else class="up_img" src="@/static/images/upImg2.png" mode=""></image>
			</view>
			<view class="title" style="margin-top: 60rpx;">微信收款码</view>
			<view class="image" @click="uploadImage(2)">
				<image v-if="wx_url" class="img" :src="wx_url" mode="widthFix"></image>
				<image v-else class="up_img" src="@/static/images/upImg2.png" mode=""></image>
			</view>
		</view>
		<!-- 底部 -->
		<BottomBtn title='保存' @submit='submitBtn'></BottomBtn>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import BottomBtn from '@/components/bottom_btn/bottom_btn.vue';
	export default {
		components:{
			BottomBtn
		},
		data() {
			return {
				code:'',
				//
				disabled:false,
				codeTxt:'发送验证码',
				sendTime:60,
				time:null,
				// 
				zfb_url:'',
				zfb_url_o:'',
				wx_url:'',
				wx_url_o:'',
			};
		},
		computed:{
			...mapState({
				userinfo: state => state.userinfo
			}),
		},
		onLoad() {
			this.zfb_url=this.userinfo.zfb_img || ''
			this.wx_url=this.userinfo.wx_img || ''
		},
		onShow() {
			
		},
		methods:{
			// 发送验证码
			sendCodeBtn(){
				var that = this
				if(that.disabled){
					return
				}
				that.$tips.showLoading('发送中')
				var params = {
					mobile:that.userinfo.mobile,
					event:'skm'
				}
				that.$httpApi.smsSend(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						if (!that.timer) {
						  that.disabled = true
						  that.codeTxt = that.sendTime+'s'
						  that.timer = setInterval(() => {
						    if (that.sendTime > 0 && that.sendTime <= 60) {
						      that.sendTime--
						      that.codeTxt = that.sendTime+'s'
						    } else {
						      that.disabled = false
						      that.sendTime = 60
						      that.codeTxt = '重新获取'
						      clearInterval(that.timer)
						      that.timer = null;
						    }
						  }, 1000)
						}
					}
				})
			},
			uploadImage(val){
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.$tips.showLoading('上传中')
						const uploadTask = uni.uploadFile({
							url: that.$baseVal.baseUrl+'/api/Common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')
							},
							formData: {
								'type':'pay_img'
							},
							success: function(uploadFileRes) {
								that.$tips.hideLoading()
								var res = JSON.parse(uploadFileRes.data)
								if(res.code==1){
									console.log(res)
									if(val==1){
										that.zfb_url=res.data.fullurl
										that.zfb_url_o=res.data.url
									}else{
										that.wx_url=res.data.fullurl
										that.wx_url_o=res.data.url
									}
								}
							}
						});
					},
					error: function(e) {
						// console.log(e);
					}
				})
			},
			// 底部按钮
			submitBtn(){
				var that = this
				if(that.code==''){
					that.$tips.showToast('请输入验证码')
					return
				}else if(that.zfb_url==''){
					that.$tips.showToast('请上传支付宝收款码')
					return
				}else if(that.wx_url==''){
					that.$tips.showToast('请上传微信收款码')
					return
				}else{
					that.$tips.showLoading('保存中')
					var zfb = ''
					var wx = ''
					if(that.zfb_url_o){
						zfb = {
							zfb_img:that.zfb_url_o,
						}
					}
					if(that.wx_url_o){
						wx = {
							wx_img:that.wx_url_o,
						}
					}
					var params = {
						...zfb,
						...wx,
						captcha:that.code,
					}
					that.$httpApi.userSkm(params).then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							that.$tips.showToast('保存成功')
							that.$store.dispatch('GetUserInfo')
							setTimeout(function(){
								uni.navigateBack()
							},2000)
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.person_paycode{
		width: 100%;
		padding-top: 24rpx;
		.main{
			width: 100%;
			padding: 0rpx 44rpx 40rpx;
			background: #fff;
			.input{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				.left{
					width: 200rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				.right{
					width: calc(100% - 200rpx);
					display: flex;
					align-items: center;
					u-input{
						width: 100%;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
				}
				.right_code{
					width: calc(100% - 200rpx);
					display: flex;
					align-items: center;
					justify-content: space-between;
					u-input{
						width: calc(100% - 160rpx);
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					text{
						display: block;
						width: 160rpx;
						line-height: 70rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #26C281;
					}
				}
			}
			.title{
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.image{
				width: 100%;
				margin-top: 36rpx;
				.up_img{
					display: block;
					width: 160rpx;
					height: 160rpx;
					margin: auto;
				}
				.img{
					display: block;
					width: 300rpx;
					margin: auto;
				}
			}
		}
	}
</style>
